<template>
    <div class="container">
        <div class="right-block" :class="{'active': scroll}">
            <Tabs size="small" class="news-tab">
                <TabPane label="热门推荐">
                    <div class="news-district">
                        <ul class="news-wrapper">
                            <li v-for="news in hotNewsList">
                                <router-link class="ellipsis" :to="{path:'/news-content',query:{q:news.id}}" :title="news.name">{{news.name}}</router-link>
                            </li>
                            <li v-if="hotNewsList.length == 0">暂无</li>
                        </ul>
                    </div>
                </TabPane>
                <TabPane label="通知公告">
                    <div class="news-district">
                        <ul class="news-wrapper">
                            <li v-for="news in infoNewsList">
                                <router-link class="ellipsis" :to="{path:'/news-content',query:{q:news.id}}" :title="news.name">{{news.name}}</router-link>
                            </li>
                            <li v-if="infoNewsList.length == 0">暂无</li>
                        </ul>
                    </div>
                </TabPane>
                <TabPane label="注册招聘">
                    <div class="news-district">
                        <ul class="news-wrapper">
                            <li v-for="news in requireNewsList">
                                <router-link class="ellipsis" :to="{path:'/news-content',query:{q:news.id}}" :title="news.name">{{news.name}}</router-link>
                            </li>
                            <li v-if="requireNewsList.length == 0">暂无</li>
                        </ul>
                    </div>
                </TabPane>
            </Tabs>
            <!-- <div class="news-district">
                <p class="district-title">热门推荐</p>
                <ul class="news-wrapper">
                    <li v-for="news in hotNewsList"><router-link :to="{path:'/news-content',query:{q:news.id}}" class="ellipsis">{{news.name}}</router-link></li>
                    <li v-if="hotNewsList.length == 0">暂无</li>
                </ul>
            </div>
            <div class="news-district">
                <p class="district-title">通知公告</p>
                <ul class="news-wrapper">
                    <li v-for="news in infoNewsList"><router-link :to="{path:'/news-content',query:{q:news.id}}" class="ellipsis">{{news.name}}</router-link></li>
                    <li v-if="infoNewsList.length == 0">暂无</li>
                </ul>
            </div>
            <div class="news-district">
                <p class="district-title">招聘注册</p>
                <ul class="news-wrapper">
                    <li v-for="news in requireNewsList"><router-link :to="{path:'/news-content',query:{q:news.id}}" class="ellipsis">{{news.name}}</router-link></li>
                    <li v-if="requireNewsList.length == 0">暂无</li>
                </ul>
            </div> -->
        </div>
        <div class="left-block">
            <div class="news">
                <div class="news-title">{{news.name}}</div>
                <div class="news-message">
                    <span>作者：{{news.author}}</span>
                    <i>&nbsp;|&nbsp;</i>
                    <span>{{news.inTimes}}</span>
                    <i>&nbsp;|&nbsp;</i>
                    <span>浏览次：{{news.browse_number}}</span>
                    &nbsp;&nbsp;<a href="/news" class="back">返回</a>
                </div>
                <div class="content" v-html="news.content"></div>
            </div>
        </div>

    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
            hotNewsList: [],
            infoNewsList: [],
            requireNewsList: [],
            news: {},
            scroll: false
        };
    },
    mounted() {
        this.initNews();
        /*this.initHotNews();
            this.initInfoNews();
            this.initRequireNews();*/
        this.initSpecialNews("HOST", "hotNewsList");
        this.initSpecialNews("NOTICE", "infoNewsList");
        this.initSpecialNews("ACUTE", "requireNewsList");
        document.addEventListener("scroll", this.affixRightBlock);
        // this.$el.addEventListener('scroll', this.affixRightBlock);
    },
    beforeDestory() {
        window.removeEventListener("scroll");
    },
    watch: {
        $route() {
            this.initNews();
        }
    },
    methods: {
        affixRightBlock() {
            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            this.scroll = scrollTop > 106 ? true : false;
        },
        initHotNews() {
            this.$http
                .get("/news/list", {
                    params: {
                        include: "category",
                        fe: 1,
                        status: "HOST"
                    }
                })
                .then(response => {
                    var data = response.data;
                    this.hotNewsList = data.data;
                })
                .catch(err => {});
        },
        initSpecialNews(type, listArr) {
            this.$http
                .get("/news/list", {
                    params: {
                        include: "category",
                        fe: 1,
                        status: type
                    }
                })
                .then(response => {
                    var data = response.data;
                    this[listArr] = data.data;
                })
                .catch(err => {});
        },
        initInfoNews() {
            this.$http
                .get("/news/list", {
                    params: {
                        include: "category",
                        fe: 1,
                        status: "NOTICE"
                    }
                })
                .then(response => {
                    var data = response.data;
                    this.infoNewsList = data.data;
                })
                .catch(err => {});
        },
        initRequireNews() {
            this.$http
                .get("/news/list", {
                    params: {
                        include: "category",
                        fe: 1,
                        status: "ACUTE"
                    }
                })
                .then(response => {
                    var data = response.data;
                    this.requireNewsList = data.data;
                })
                .catch(err => {});
        },
        initNews() {
            this.$http
                .get("/news/" + this.$route.query.q, {
                    params: {
                        fe: 1
                    }
                })
                .then(ret => {
                    this.news = ret.data.data;
                })
                .catch(err => {});
        }
    }
};
</script>
<style type="text/css" scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.right-block {
    width: 368px;
    float: right;
    padding-left: 10px;
    border-left: 1px solid #999;
}
.right-block.active {
    position: fixed;
    top: 10px;
    z-index: 111;
    background: #fff;
}
@media (min-width: 1200px) {
    .right-block.active {
        right: calc(50% - 600px);
    }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    .right-block.active {
        right: 0;
    }
}
.news-district {
    line-height: 2;
    padding: 0 10px;
    margin-bottom: 20px;
}
.district-title {
    font-weight: bold;
    font-size: 16px;
}
.news-wrapper li a {
    display: block;
}
.news-wrapper li a:hover {
    color: #15ccac;
    text-decoration: underline;
}
.left-block {
    margin-right: 400px;
}
.news {
    margin-top: 25px;
}
.news-title {
    text-align: center;
    font-size: 18px;
    line-height: 2;
}
.news-message {
    text-align: center;
    color: #999;
    font-size: 12px;
    line-height: 22px;
}
.content {
    line-height: normal;
    margin: 20px 0 40px;
    word-wrap: break-word;
}
.back {
    display: inline-block;
    color: #2d8cf0;
    margin-bottom: 20px;
}
@media (max-width: 1024px) {
    .right-block {
        float: none;
        width: auto;
        padding: 0;
        border: 0;
    }
    .right-block.active {
        position: static;
    }
    .left-block,
    .right-block {
        margin: 0 30px 20px;
    }
    .container {
        display: flex;
        flex-direction: column-reverse;
    }
    .back {
        display: none;
    }
}
</style>